<template>
  <div>
    <div class="top">
      <p>异常情况报警</p>
    </div>
    <div class="selects">
      <el-row>
        <el-form ref="form"
                 :model="form"
                 label-width="150px">
          <el-col :span="8">
            <el-form-item label="场景名称：">
              <el-select v-model="form.sceneName"
                         placeholder="全部">
                <el-option label="全部"
                           value="1"></el-option>
                <el-option label="场景1"
                           value="2"></el-option>
                <el-option label="场景2"
                           value="3"></el-option>
                <el-option label="场景3"
                           value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务名称：">
              <el-select v-model="form.taskName"
                         placeholder="全部">
                <el-option label="全部"
                           value="01"></el-option>
                <el-option label="任务1"
                           value="02"></el-option>
                <el-option label="任务2"
                           value="03"></el-option>
                <el-option label="任务3"
                           value="04"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报警类型：">
              <el-select v-model="form.alarmType"
                         placeholder="全部">
                <el-option label="全部"
                           value="001"></el-option>
                <el-option label="机器人状态报警"
                           value="002"></el-option>
                <el-option label="环境报警"
                           value="003"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机器人名称：">
              <el-select v-model="form.robotName"
                         placeholder="全部">
                <el-option label="全部"
                           value="0001"></el-option>
                <el-option label="机器人1"
                           value="0002"></el-option>
                <el-option label="机器人2"
                           value="0003"></el-option>
                <el-option label="机器人3"
                           value="0004"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报警时间：">
              <el-date-picker v-model="time"
                              type="daterange"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  class="buttons">
            <el-button @click="reset()">重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-col>

        </el-form>
      </el-row>
    </div>

    <el-row>
      <el-table :data="tableData"
                height="572"
                :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }">
        <el-table-column prop="num"
                         label="序号"
                         align="center">
        </el-table-column>

        <el-table-column prop="sceneName"
                         label="场景名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="sceneCoding"
                         label="场景编号"
                         align="center">
        </el-table-column>
        <el-table-column prop="taskName"
                         label="任务名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="taskCoding"
                         label="任务编号"
                         align="center">
        </el-table-column>
        <el-table-column prop="robotName"
                         label="机器人名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="robotCoding"
                         label="机器人编号"
                         align="center">
        </el-table-column>
        <el-table-column prop="startTime"
                         label="本次执行开始时间"
                         align="center"
                         width="220">
        </el-table-column>
        <el-table-column prop="endTime"
                         label="本次执行完成时间"
                         align="center"
                         width="220">
        </el-table-column>
        <el-table-column prop="alarmTime"
                         label="报警时间"
                         align="center"
                         width="220">
        </el-table-column>
        <el-table-column prop="alarmType"
                         label="报警类型"
                         align="center">
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="details(scope.row)">查看详情</el-button>

          </template>
        </el-table-column>

      </el-table>
    </el-row>
    <el-dialog title="报警报告详情"
               :visible.sync="dialogVisible"
               width="30%">
      <div class="information">
        <div class="essentialInformation">
          <p>基本信息</p>
          <div class="box">
            <div class="left">
              <p>机器人名称：
                <span>{{tableData.robotName}}</span>
              </p>
              <p>场景名称：
                <span>{{tableData.sceneName}}</span>
              </p>
              <p>任务名称：
                <span>{{tableData.taskName}}</span>
              </p>
              <p>本次执行开始时间：
                <span>{{tableData.startTime}}</span>
              </p>
              <p>报警时间：
                <span>{{tableData.alarmTime}}</span>
              </p>
            </div>
            <div class="right">
              <p>机器人编号：
                <span>{{tableData.robotCoding}}</span>
              </p>
              <p>场景编号：
                <span>{{tableData.robotCoding}}</span>
              </p>
              <p>任务编号：
                <span>{{tableData.taskCoding}}</span>
              </p>
              <p>本次执行完成时间：
                <span>{{tableData.endTime}}</span>
              </p>
              <p>报警类型：
                <span>{{tableData.alarmType}}</span>
              </p>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="alarmInformation">
          <div class="title">
            <p class="pic"></p>
            <p class="info">报警信息</p>
          </div>
          <span>报警内容：</span>
          <div class="content">环境警告：巡检环境温度42摄氏度，超过阙值</div>
        </div>
      </div>
    </el-dialog>

    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10,20,30,50,100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="100"
                   background
                   align="center">
    </el-pagination>

  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      dialogVisible: false,
      time: '',
      form: {
        sceneName: '',
        taskName: '',
        alarmType: '',
        robotName: ''
      },
      tableData: [
        {
          num: '1',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '机器人状态报警',
          operation: '查看详情'
        },
        {
          num: '2',
          sceneName: '场景3',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '环境报警',
          operation: '查看详情'
        },
        {
          num: '3',
          sceneName: '场景2',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '环境报警',
          operation: '查看详情'
        },
        {
          num: '4',
          sceneName: '场景2',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '机器人状态报警',
          operation: '查看详情'
        },
        {
          num: '5',
          sceneName: '场景3',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '环境报警',
          operation: '查看详情'
        },
        {
          num: '6',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '机器人状态报警',
          operation: '查看详情'
        },
        {
          num: '7',
          sceneName: '场景2',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '环境报警',
          operation: '查看详情'
        },
        {
          num: '8',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '机器人状态报警',
          operation: '查看详情'
        },
        {
          num: '9',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '机器人状态报警',
          operation: '查看详情'
        },
        {
          num: '10',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '测试1号',
          robotCoding: 'CS001',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          alarmTime: '2022-10-25 23:12:56',
          alarmType: '环境报警',
          operation: '查看详情'
        },
      ]
    }
  },
  methods: {
    reset () {
      this.form.sceneName = '',
        this.form.taskName = '',
        this.form.alarmType = '',
        this.form.robotName = '',
        this.time = ''
    },
    details (row) {
      console.log(row);
      this.dialogVisible = true
      this.tableData.alarmTime = row.alarmTime
      this.tableData.alarmType = row.alarmType
      this.tableData.endTime = row.endTime
      this.tableData.num = row.num
      this.tableData.operation = row.operation
      this.tableData.robotCoding = row.robotCoding
      this.tableData.robotName = row.robotName
      this.tableData.sceneCoding = row.sceneCoding
      this.tableData.sceneName = row.sceneName
      this.tableData.startTime = row.startTime
      this.tableData.taskCoding = row.taskCoding
      this.tableData.taskName = row.taskName
    },
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}
.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
  p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}

.selects {
  margin: 15px 0;
  .buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

.information {
  .essentialInformation {
    p {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      text-align: left;
    }
    .box {
      display: flex;
      justify-content: space-between;
      p {
        color: #bfbfbf;
        margin-top: 9px;
        font-weight: 400;
        span {
          color: #000000;
        }
      }
    }
  }
  .alarmInformation {
    text-align: left;
    color: #bfbfbf;
    font-weight: 400;
    .title {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      margin: 20px 0;
      .pic {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-image: url("../../../assets/robot/alarm.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 9px;
      }
      .info {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #000000;
      }
    }
    .content {
      text-indent: 2em;
      line-height: 47px;
    }
  }
}

/deep/ .el-dialog__header {
  text-align: center;
  flex: 1;
  height: 60px;
  line-height: 30px;
  background: #1890ff;
}

/deep/ .el-dialog__title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}

/deep/ .el-dialog__close {
  color: #ffffff;
}

/deep/ .el-row {
  padding: 0 20px;
}

/deep/ .el-pagination {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%);
}
</style>